<template>

  <basic-container>
    <!--头部搜索栏-->
    <el-row :span="24" class="search-wrap">
      <div class="select">
        <el-col :span="4" style="line-height: 40px">选择店铺：</el-col>
        <el-select v-model="shopId" placeholder="请选择品牌" style="margin-right: 20px;width: 200px" @change="changeShop">
          <el-option
            v-for="(item,index) in shopList"
            :key="index"
            :label="item.name"
            :value="item.shopId">
          </el-option>
        </el-select>

        <el-input
          placeholder="商品名称"
          v-model="goodsName"
          clearable
          style="margin-right: 20px;width: 250px"
          @change="searchGoods"
        >
        </el-input>

      </div>
      <div class="search">
        <el-button type="primary" size="small" class="search-btn" @click="searchGoodsList">搜索</el-button>
      </div>
    </el-row>
    <el-container class="main">
    <!--侧边栏 -->
      <el-aside width="220px" class="aside-nav">
        <avue-tree
          :option="categoryOption"
          :data="goodsCategories"
          @node-click="getCategoryGoods"
        >
        </avue-tree>
      </el-aside>
      <!--  表格区    -->
      <el-main>
        <avue-crud ref="crud" :data="tableData" :option="tableoption">
          <template slot-scope="scope" slot="handle">
            <div class="handle">
              <el-button type="text" size="small" @click="goModelDetail(scope.row)">详情</el-button>
              <relationSupply :row="scope.row"
                              @refresh="refresh(scope.row)"
                              :type="1"
              ></relationSupply>
            </div>
          </template>
          <template slot-scope="scope" slot="modelList">
            <div v-for="(item,i) in scope.row.modelList" :key="i" style="display: flex">
<!--              <P style="line-height: 32px;font-size: 12px;">{{item.merchantName}}：</P>-->
              <el-tooltip placement="left-start">
                <div slot="content">
                  商品名称：{{item.goodsName}}
                  <br/>
                  规格名称：{{item.modelName}}
                  <br/>
                  单位：{{item.modelUnit}}
                  <br/>
                  价格：{{item.modelPrice}}元
                  <br/>
                  <span>图片：</span>
                  <p>
                    <img width="100px" style="margin-top:10px" :src="item.modelUrl">
                  </p>
                </div>
                <el-button type="text" size="mini">{{item.merchantName}}：</el-button>
              </el-tooltip>
              <!--取消绑定-->
              <relationSupply :row="scope.row"
                              :Supply="item"
                              @refresh="refresh(scope.row)"
                              :type="0"
              ></relationSupply>
            </div>
          </template>
        </avue-crud>
      </el-main>
    </el-container>
    <el-footer style="margin-top: 5px">
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage" :page-sizes="[10, 20, 40, 60]" :page-size="10"
                       background :layout="layout" :total="totalCount">
        </el-pagination>
      </div>
    </el-footer>
  </basic-container>
</template>

<script>
  import {getStore} from "../../util/store"
  import {fetchList, supplyGoods} from "../../api/manage/shop";
  import {getgoodslist} from "../../api/supply/supply_goods_info"
  import {getCategoryTree} from "../../api/goods/goodscategory";
  import {relateSupplygoods} from "../../const/crud/supply/suppliergoods";


  import relationSupply from "./component/relationSupply";
  export default {
    name: "index",
    data() {
      return {
        pmId: '',
        shopId: '',
        categoryId: '',
        shopList: [],
        goodsCategories: [],
        goodsName: "",
        useStatus: "2",
        currentPage: 1,
        pageSize: 10,
        tableData: [],
        tableoption: relateSupplygoods,
        layout: "total, sizes, prev, pager, next, jumper",
        totalCount: 10,
        categoryOption: {
          defaultExpandAll:true,
          addBtn: false,
          props:{
            label: 'name',
            value: 'id',
            children: 'children'
          }
        }
      }
    },
    created() {
      this.pmId = getStore({name: "pmId"});
      this.getFetchList()
    },
    components: {
      relationSupply
    },
    methods: {
      //获取店铺列表
      getFetchList() {
        let params = {
          current: 1,
          size: 100,
          merchantId: this.pmId,
          status: this.useStatus
        }
        fetchList(params).then(res => {
          this.shopList = res.data.data.records
          this.shopId = this.shopList[0].shopId
          this.getGoodsCategoryList()
          this.getGoodsList()
        })
      },
      //获取商品
      getGoodsList(params) {
        params = {
          current: this.currentPage,
          size: this.pageSize,
          shopId: this.shopId,
          categoryId: this.categoryId,
          goodsName: this.goodsName
        }
        getgoodslist(params).then(res => {
          this.totalCount = res.data.data.total
          let currentData = res.data.data.records
          for(let item of currentData) {
            item.modelList=[]
            let params = {
              goodsModelId: item.modelId
            }
            supplyGoods(params).then(res => {
              item.modelList = res.data.data.modelList
            })
          }
          this.tableData = currentData
        })
      },
      // 获取商品分类列表
      getGoodsCategoryList(param = {}) {
        getCategoryTree({shopId: this.shopId}).then(res => {
          this.goodsCategories = res.data.data
        })
      },
      // 获取分类商品
      getCategoryGoods(categoryId) {
        this.categoryId = categoryId.id
        this.getGoodsList()
      },
      //选店铺获取商品
      changeShop() {
        this.getGoodsList()
        this.getGoodsCategoryList()
      },
      //搜索
      searchGoodsList() {
        this.getGoodsList()
      },
      searchGoods(val) {
        this.goodsName = val
        this.getGoodsList()
      },
      //分页——跳转页
      handleSizeChange(size) {
        this.pageSize = size
        this.getGoodsList()
      },
      handleCurrentChange(page) {
        this.currentPage = page
        this.getGoodsList()
      },
      refresh(val) {
        supplyGoods({goodsModelId: val.modelId}).then(res => {
          this.tableData[val.$index].modelList = res.data.data.modelList
        })
        // this.getGoodsList()
      },
      goModelDetail(row) {
        const query = {
          res: {
            goodsId: row.goodsId
          }
        }
        this.$router.push({path: 'modelGoodsDetail', query: query})
      }
    }
  }
</script>

<style scoped>
  .search-wrap {
    display: flex;
    padding: 24px 24px 0 24px;
  }
  .select {
    display: flex;
  }

  .search {
    margin-left: 100px;
  }
  .main {
    margin-top: 20px;
  }
  .aside-nav {
    height: 400px;
  }
  .handle {
    display: flex;
    justify-content: space-around;
  }
</style>
